<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2025/4/17
  Time: 18:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

<style>
    :root {
        --primary-color: #1A535C;
        --secondary-color: #4ECDC4;
        --accent-color: #FF6B6B;
        --success-color: #55B74E;
    }

    .agri-card {
        border: none;
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(26, 83, 92, 0.1);
        background: linear-gradient(145deg, #ffffff 0%, #f5fffd 100%);
    }

    .agri-header {
        background: linear-gradient(135deg, var(--primary-color), #1B8074);
        color: white;
        border-radius: 20px 20px 0 0;
        padding: 1.5rem 2rem;
    }

    .agri-table {
        --bs-table-bg: transparent;
        --bs-table-striped-bg: rgba(78, 205, 196, 0.05);
    }

    .agri-table thead th {
        background: linear-gradient(180deg, #e6f6f5 0%, #d4f0ee 100%);
        color: var(--primary-color);
        border-bottom: 3px solid var(--secondary-color);
        font-weight: 600;
    }

    .table-hover > tbody > tr:hover {
        background: rgba(78, 205, 196, 0.1);
        transform: translateY(-2px);
        transition: all 0.3s ease;
    }

    .stock-indicator {
        display: inline-block;
        padding: 0.5rem 1.2rem;
        border-radius: 25px;
        font-weight: 500;
    }

    .stock-high {
        background: rgba(85, 183, 78, 0.15);
        color: var(--success-color);
    }

    .stock-med {
        background: rgba(255, 198, 0, 0.15);
        color: #d4a400;
    }

    .stock-low {
        background: rgba(255, 107, 107, 0.15);
        color: var(--accent-color);
    }

    .btn-agri-primary {
        background: var(--primary-color);
        color: white;
        padding: 0.6rem 1.8rem;
        border-radius: 10px;
        transition: all 0.3s ease;
        border: none;
    }

    .btn-agri-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(26, 83, 92, 0.2);
    }

    .action-btns .btn {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        transition: all 0.3s ease;
    }

    .action-btns .btn-edit {
        background: rgba(78, 205, 196, 0.15);
        color: var(--secondary-color);
    }

    .action-btns .btn-delete {
        background: rgba(255, 107, 107, 0.15);
        color: var(--accent-color);
    }

    .empty-state {
        background: url('data:image/svg+xml,<svg...>') no-repeat center/contain;
        height: 300px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>

<div class="card agri-card mb-5">
    <div class="card-header agri-header">
        <div class="d-flex flex-column flex-md-row justify-content-between align-items-center">
            <h3 class="mb-3 mb-md-0">
                <i class="fas fa-tractor me-3"></i>
                智慧农业管理系统
            </h3>
            <div class="d-flex gap-3">
                <a href="products?action=new" class="btn btn-agri-primary">
                    <i class="fas fa-seedling me-2"></i>新品上市
                </a>
                <button class="btn btn-agri-primary" type="button" data-bs-toggle="modal" data-bs-target="#statsModal">
                    <i class="fas fa-chart-pie me-2"></i>数据看板
                </button>
            </div>
        </div>
    </div>

    <div class="card-body p-4">
        <div class="table-responsive-lg">
            <table class="table agri-table table-hover align-middle">
                <thead class="agri-table-header">
                <tr>
                    <th style="width:25%" class="ps-4">农产品</th>
                    <th style="width:15%">市场价格</th>
                    <th style="width:20%">供应状态</th>
                    <th style="width:25%">采收日期</th>
                    <th style="width:15%" class="pe-4">操作</th>
                </tr>
                </thead>
                <tbody>
                <c:forEach var="product" items="${products}">
                    <tr>
                        <td class="ps-4">
                            <div class="d-flex align-items-center">
                                <img src="assets/${product.image}.png"
                                     class="rounded-circle me-3"
                                     width="40"
                                     height="40"
                                     alt="${product.name}">
                                <div>
                                    <h6 class="mb-0 text-primary">${product.name}</h6>
                                    <small class="text-muted">${product.category}</small>
                                </div>
                            </div>
                        </td>
                        <td>
                            <span class="text-success fw-bold">¥</span>
                            <span class="h5 fw-bolder">${product.price}</span>
                        </td>
                        <td>
                            <div class="d-flex align-items-center">
                                <c:choose>
                                    <c:when test="${product.stock > 100}">
                                            <span class="stock-indicator stock-high">
                                                <i class="fas fa-angle-up me-2"></i>供应充足
                                            </span>
                                    </c:when>
                                    <c:when test="${product.stock > 50}">
                                            <span class="stock-indicator stock-med">
                                                <i class="fas fa-wave-square me-2"></i>供需平衡
                                            </span>
                                    </c:when>
                                    <c:otherwise>
                                            <span class="stock-indicator stock-low">
                                                <i class="fas fa-angle-down me-2"></i>急需补货
                                            </span>
                                    </c:otherwise>
                                </c:choose>
                            </div>
                        </td>
                        <td>
                            <div class="d-flex align-items-center">
                                <i class="far fa-calendar-check me-3 text-muted"></i>
                                <div>
                                    <div>${product.createdAt}</div>
                                    <small class="text-muted">上次更新: 3天前</small>
                                </div>
                            </div>
                        </td>
                        <td class="pe-4">
                            <div class="action-btns d-flex gap-2">
                                <a href="products?action=edit&id=${product.id}"
                                   class="btn btn-edit"
                                   data-bs-toggle="tooltip"
                                   title="编辑信息">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <button class="btn btn-delete"
                                        data-bs-toggle="modal"
                                        data-bs-target="#deleteModal"
                                        data-product-id="${product.id}"
                                        data-product-name="${product.name}">
                                    <i class="fas fa-trash-alt"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>

        <c:if test="${empty products}">
            <div class="empty-state text-center py-5">
                <div class="mb-4">
                    <i class="fas fa-basketball fa-4x text-muted mb-4"></i>
                    <h3 class="text-secondary">当前货架空空如也</h3>
                    <p class="text-muted">点击「新品上市」开始管理您的农产品</p>
                </div>
            </div>
        </c:if>
    </div>
</div>

<!-- 删除确认模态框 -->
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0" style="border-radius: 20px">
            <div class="modal-header bg-gradient-danger text-white border-0" style="border-radius: 20px 20px 0 0">
                <div class="modal-icon bg-white rounded-circle p-3 me-3">
                    <i class="fas fa-exclamation-triangle text-danger fs-4"></i>
                </div>
                <h5 class="modal-title">确认删除？</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body py-4">
                <div class="alert alert-light border mb-3">
                    <div class="d-flex align-items-center">
                        <i class="fas fa-seedling text-danger me-3 fs-4"></i>
                        <div>
                            <h6 class="mb-0">即将删除以下农产品：</h6>
                            <span class="text-danger fw-bold" id="productName"></span>
                        </div>
                    </div>
                </div>
                <div class="text-muted small">
                    <i class="fas fa-info-circle me-2"></i>
                    该操作会永久删除产品数据及关联销售记录
                </div>
            </div>
            <div class="modal-footer border-0">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times me-2"></i>取消
                </button>
                <form id="deleteForm" method="post">
                    <button type="submit" class="btn btn-danger">
                        <i class="fas fa-trash-alt me-2"></i>确认删除
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
    // 模态框数据绑定
    const deleteModal = document.getElementById('deleteModal')
    deleteModal.addEventListener('show.bs.modal', event => {
        const button = event.relatedTarget
        const productId = button.getAttribute('data-product-id')
        const productName = button.getAttribute('data-product-name')
        const modalTitle = deleteModal.querySelector('.modal-title')
        const productNameSpan = deleteModal.querySelector('#productName')

        document.getElementById('deleteForm').action = `products?action=delete&id=${productId}`
        productNameSpan.textContent = productName
    })

    // 工具提示初始化
    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    tooltipTriggerList.forEach(tooltipTrigger => {
        new bootstrap.Tooltip(tooltipTrigger, {
            boundary: 'window'
        })
    })
    // 模态框交互处理
    document.getElementById('deleteModal').addEventListener('show.bs.modal', function (event) {
        const button = event.relatedTarget
        const productId = button.getAttribute('data-product-id')
        const form = document.getElementById('deleteForm')
        form.action = 'products?action=delete&id=' + productId
    })

    // 初始化工具提示
    const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
    const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
</script>

